<!-- subpkg_consult/payment/index.vue -->
<script lang="ts" setup>
  import { preOrderApi } from '@/apis/consult'
  import { createOrderApi } from '@/apis/order'
  import { getPatientDetailApi } from '@/apis/patient'
  import { useConsultStore } from '@/stores/consult'
  import type { OrderPreData } from '@/types/consult'
  import type { PatientItem } from '@/types/patient'
  import { ref } from 'vue'
  // 1. 生成预支付订单
  // 患者相关的数据（不具有响应性）
  const store = useConsultStore()
  // 预付订单信息
  const preOrderInfo = ref({} as OrderPreData)

  // 生成预付订单
  const createPreOrder = async () => {
    // 预付订单信息     极速问诊2/找医生/开药问诊      普通/三甲
    const data = await preOrderApi({ type: store.type, illnessType: store.illnessType })
    // 渲染订单数据
    preOrderInfo.value = data
  }

  createPreOrder()

  // // 2. 就诊患者信息
  const patientDetail = ref({} as PatientItem)
  // 获取患者信息
  const getPatientDetail = async () => {
    // 患者详情接口
    const data = await getPatientDetailApi(store.patiendId) // 患者id
    // 渲染患者数据
    patientDetail.value = data
  }
  // 获取就诊患者信息
  getPatientDetail()

  const orderId = ref('')

  const onPaymentButtonClick = async () => {
    // 如果已经生成了订单 就不能再触发这里的逻辑
    if (orderId.value) {
      uni.showToast({
        title: '已经生成订单了',
        icon: 'none',
      })
      return
    }

    const res = await createOrderApi({
      type: store.type, // 极速问诊/找医生
      illnessType: store.illnessType, // 三甲
      depId: store.depId, // 科室id
      consultFlag: store.illnessInfo.consultFlag, // 是否接诊过
      illnessDesc: store.illnessInfo.illnessDesc, // 描述
      illnessTime: store.illnessInfo.illnessTime, // 时间
      pictures: store.illnessInfo.pictures, // 照片
      patientId: store.patiendId, // 患者id
    })
    console.log(res.id) // 订单id
    orderId.value = res.id

    // 已经生成好订单  仓库数据可以清空了
    store.clear()
  }
</script>

<template>
  <scroll-view>
    <view class="payment-page">
      <uni-section
        title-font-size="32rpx"
        title-color="#121826"
        padding="30rpx"
        :title="`图文问诊 ${preOrderInfo.payment}元`"
      >
        <uni-list :border="false">
          <uni-list-item
            title="极速问诊"
            note="自动分配医生"
            thumb="/static/uploads/doctor-avatar.jpg"
            thumb-size="lg"
          />
          <uni-list-item
            title="优惠券"
            show-arrow
            :right-text="`-¥${preOrderInfo.couponDeduction}`"
          />
          <uni-list-item title="积分抵扣">
            <template #footer>
              <view class="uni-list-text-red">-¥{{ preOrderInfo.pointDeduction }}</view>
            </template>
          </uni-list-item>
          <uni-list-item title="实付款">
            <template #footer>
              <view class="uni-list-text-red">¥{{ preOrderInfo.actualPayment }}</view>
            </template>
          </uni-list-item>
        </uni-list>
      </uni-section>

      <view class="dividing-line"></view>
      <!-- 患者资料 -->
      <uni-section title-font-size="32rpx" title-color="#121826" padding="30rpx" title="患者资料">
        <uni-list :border="false">
          <uni-list-item title="患者信息">
            <template #footer>
              <view class="uni-list-text-gray">
                {{ patientDetail.name }} | {{ patientDetail.genderValue }} |
                {{ patientDetail.age }}岁
              </view>
            </template>
          </uni-list-item>
          <uni-list-item border title="病情描述" :note="store.illnessInfo.illnessDesc" />
        </uni-list>
      </uni-section>

      <!-- <view class="payment-agreement">
        <radio color="#20c6b2" value="1" />
        我已同意<text style="color: #20c6b2">支付协议</text>
      </view> -->
    </view>
    <!-- 下一步操作 -->
    <view class="next-step">
      <view class="total-amount">
        合计: <text class="number">¥{{ preOrderInfo.actualPayment }}</text>
      </view>
      <button class="uni-button" @click="onPaymentButtonClick">立即支付</button>
    </view>
  </scroll-view>
</template>

<style lang="scss">
  @import './index.scss';
</style>
